@import "var.less";
@import "table.less";

#historyPath{
	&.noselect{user-select:none;}
	.search-btn{right: 140px;}
	.pathset-change-btn{
		right: 10px;width: 120px;
	}
	.map{
		margin-top: 15px;box-shadow: @shadow-base;overflow: hidden;
		position: relative;

		&.fullScreen{
			position: fixed;top:0;bottom:0;left: 0;right: 0;z-index: 999;margin:0;padding: 0;
		}
	
		.map-top{
			position: absolute;z-index: 240;top:10px;left: 10px;

			>ul>li{display: inline-block;}
		}

		.map-left{
			position: absolute;left: 10px;top:56px;z-index:186;padding: 0 10px;
			width: 270px;box-shadow: @shadow-base;background: #fff;
			transition:all @transition-time;
			
			.title{
				height: 36px;line-height: 36px;background: @primary-color;margin: 0 -10px;color:#fff;
				>span{padding-left:10px;}
				.tigger{
					display: inline-block;border-left:1px solid darken(@primary-color, 8%);float: right;
					.ivu-btn {height: 36px;vertical-align: top;text-align: center;}
					.fa{font-size: 16px;vertical-align: middle;}
				}
			}
			.left-content{position: relative;overflow: auto;opacity: 1;transition:all @transition-time;margin:0 -10px;}
			
			.set-item{
				margin-top: 15px;border-bottom: 1px dashed @border-color-base;padding-bottom: 15px;
				.set-title{
					border-left: 3px solid @info-color;padding-left: 10px;margin-left: 10px;
					span{font-size: 12px;color:darken(@border-color-base, 15%);}
				}

				.speed-set{
					position: relative;padding:0 25px;height: 75px;
					.speed-setbar{
						position:absolute;
						bottom:5px;
						right:15px;
						display:none;
					}
					@speed-slider-width:220px;
					.speed-slider{
						width:@speed-slider-width;
						height:15px;
						margin:60px 0 10px 0;
						background:#d3cfd0;
						position:relative;
					}
					.speed-slider .selected{
						z-index:2;
					}
					.speed-slider i{
						position:relative;
						margin-top:-5px;
						margin-left:-9px;
						display:inline-block;
						width:16px;
						height:25px;
						border:1px solid #d3cfd0;
						background:#fff;
						cursor: pointer;
						float: right;
					}

					.speed-slider b{
						position:absolute;
						top:-26px;
						left:-18px;
						background:rgba(0,0,0,.7);
						color:#fff;
						font-weight:normal;
						font-style:normal;
						display:inline-block;
						border-radius:3px;
						width:50px;
						font-size: 12px;
						text-align:center;
						
					}

					.speed-slider-scale{
						background-image:url(../images/speed-slider-bg.png);
						background-size:100%;
						background-repeat: no-repeat;
						width:@speed-slider-width;
						height:10px;
						list-style:none;
						padding:0;
					}

					.speed-slider-scale li{
						float:left;
						width:@speed-slider-width/5px;
						height:30px;
						margin-top:10px;
						position:relative;
						font-size: 12px;
					}
					.speed-setbar .btns{
						margin-top:55px;
						text-align:right;
					}
					.speed-slider-scale li span{
						position:absolute;
						left:-3px;
					}
					.speed-slider-scale li em{
						font-style:normal;
						position:absolute;
						right:-6px;
					}
					.speed-slider div{
						height:100%;
						float:left;
						text-align:right;
					}
				}
			}

			.dateselect{margin-top: 20px;}

			.table{margin:0;border:0;}
			.toolbtn{
				padding: 15px 5px 10px 5px;font-size:12px;
				.ivu-icon{font-size: 14px;}
				li{display: inline-block;}
			}
			.pathlist{
				border:1px solid @border-color-base;border-top:0;position: relative;
				opacity: 1;transition:opacity @transition-time;
				
				td:first-child,th:first-child{
					width: 40px;
				}
				td:last-child,th:last-child{
					width: 140px;
				}
				td{
					border-bottom: 1px solid @border-color-base;
				}

				.ivu-checkbox-wrapper{margin: 0;}
			}

			&.off{
				left:-100%;
			}
		}

		.speed-chart-div{
			position: absolute;width: 100%;height: 100px;bottom:33px;left: 0;padding: 0 10px;z-index:183;
			.speed-chart-close{
				position: absolute;right: 3px;top:-10px;font-size: 20px;cursor: pointer;z-index: 2;
			}
			#speed-chart{
				height:78px;width: 100%;box-shadow: @shadow-base;padding: 5px 0 5px 0;background: rgba(255,255,255,.87);
			}
		}


		.map-bottom{
			width: 100%;padding: 0 10px 0 10px;
			position: absolute;bottom: 10px;z-index:183;

			
			.play-bar{
				background: #fff;padding:15px 240px 15px 80px;box-shadow: @shadow-base;
				position: relative;

				.tools{
					position: absolute;left: 0;top:0;
					li{
						width:34px;height: 34px;line-height: 34px;text-align: center;font-size: 20px;
						cursor: pointer;
					}

					li:first-child{background: @primary-color;color:#fff;}
					.mapset{position: absolute;right: 0;top:0;}
				}
				.ivu-slider-wrap{
					margin:0;
				}
				li{display: inline-block;}
			}
		
			.mapset{
				position: absolute;top:0;right: 0;line-height: 36px;
				li{float: left;}
				span{display:inline-block;text-align: center;}
				button{
					height: 36px;vertical-align: top;

					i{margin-right: 5px;font-size: 14px;}
				}
			}

			.pathset-bar{
				background: #fff;padding:0px 125px 0px 90px;box-shadow: @shadow-base;height:36px;
				position: relative;
				.ivu-slider-button{border-color: #109618;}
				.ivu-slider-bar{background: #109618;}
				li{display: inline-block;}
				li:nth-child(2){width: 100%;position: relative;}
				li:nth-child(1){position: absolute;left: 10px;top:0;line-height:36px;}
				li:nth-child(3){
					position: absolute;right: 56px;top:0;line-height:36px;
					button{
						height: 36px;vertical-align: top;
					}
				}
				li:nth-child(4){
					position: absolute;right: 0;top:0;line-height:36px;
					button{
						height: 36px;vertical-align: top;
					}
				}


			}
		}

		.map-right{
			position: absolute;right: 10px;top:10px;z-index:182;
			width: 300px;

			.right-btn{
				position: absolute;right: 0;top:0;
			}
			.path-info{
				background:#fff;box-shadow: @shadow-base;font-size: 12px;
				.ivu-tabs-bar{margin: 0;}
				.ivu-tabs-content{height: 238px;transition:all @transition-time;}
				.right-btn .ivu-icon-chevron-up{
					transform:rotate(0deg);transition:all @transition-time;
				}
				.info{
					padding: 15px;line-height: 26px;
					label{display: inline-block;}
				}
				.list-warp{overflow: auto;max-height: 208px;}
				.stoplist,.eventlist{
					table{width: 100%;text-align: center;}
					th{background: @border-color-base;padding: 5px 10px;}
					td{padding: 5px 10px;border-bottom: 1px solid @border-color-base;}
					tr{cursor: pointer;}
					tr.selected{
						background: @info-color;color:#fff;
					}
				}
			}

			&.closeRight{
				.ivu-tabs-content{height: 0px;}
				.right-btn .ivu-icon-chevron-up{
					transform:rotate(180deg);
				}
			}
		}
	}
}